<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>选择导出字段</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        input[type=checkbox], input[type=radio] {
            margin: 8px 2px 0;
            float:left;

        }

        td span{
            float:left;

        }
        content {
            position: absolute;
            top: 50%;
            height: 240px;
            margin-top: -120px; /* negative half of the height */
        }
        .model-picker-input {
            opacity: 0 !important;
            top: -9999px;
            left: -9999px;
            position: absolute;
        }

        .model-picker-span {
            position: relative;
            display: block;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            color: #ccc;
            cursor: pointer;
        }

        .jiaobiao {
            position: relative;
        }

        .jiaobiao i {
            display: block;
            width: 0;
            height: 0;
            border-width: 0px 0 12px 12px;
            border-style: solid;
            border-color: transparent transparent transparent #2a8cec;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .table-detail td.twoLine {
            line-height: 1.5 !important;
            padding: 3px 0 !important;
        }

        .model-picker-span > .placeholder {
            color: #aaa;
        }

        .model-picker-span > .arrow {
            position: absolute;
            top: 50%;
            right: 8px;
            width: 10px;
            margin-top: -3px;
            height: 5px;
            background: url(../images/drop-arrow.png) -10px -25px no-repeat;
        }

        .model-picker-span.focus,
        .model-picker-span.open {
            border-bottom-color: #46A4FF;
        }

        .model-picker-span.open > .arrow {
            background-position: -10px -10px;
        }

        .model-picker-span > .title > span {
            color: #333;
            padding: 5px;
            border-radius: 3px;
        }

        .model-picker-span > .title > span:hover {
            background-color: #f1f8ff;
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select-wrap {
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
        }

        .model-select-tab {
            border-bottom: 1px solid #ccc;
            background: #f5f5f5;
            font-size: 13px;
        }

        .model-select-tab > a {
            display: inline-block;
            padding: 4px 20px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid transparent;
            color: #4D4D4D;
            text-align: center;
            outline: 0;
            text-decoration: none;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: -1px;
        }

        .model-select-tab > a.active {
            background: #fff;
            border-bottom: 1px solid #fff;
            color: #46A4FF;
        }

        .model-select-tab > a:first-child {
            border-left: none;
        }

        .model-select-tab > a:last-child.active {
            border-right: 1px solid #ccc;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select {
            font-size: 16px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select dt {
            position: absolute;
            width: 2.5em;
            font-weight: 500;
            text-align: right;
            line-height: 2;
        }

        .model-select dd {
            margin-left: 0;
            line-height: 2;
        }

        .model-select.province dd {
            margin-left: 3em;
        }

        .model-select a {
            display: inline-block;
            padding: 0 10px;
            outline: 0;
            text-decoration: none;
            white-space: nowrap;
            margin-right: 2px;
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        /* .table-detail input[type=text] {
             padding-left: 0 !important;
         }*/

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        select {
            color: rgb(42, 140, 236) !important;
            background: #fff;
        }

        .table-detail td {
            font-size: 14px;
            line-height: 29px;
            height: 29px;
            border-right: 1px solid #cbcbcb;
            border-bottom: 1px solid #cbcbcb;
        }

        .table-detail td.td-title {
            line-height: 1.5;
            font-size: 12px;
            height: 29px;
            line-height: 29px;
        }

        .table-detail td.td-row3 {
            height: 70px;
            line-height: 20px;
            max-height: 70px;
            overflow: hidden;
            position: relative;
        }

        .yuying {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 20px;
            height: 20px;
            background: url("/dist/img/yuyin.png");
            background-size: cover;
            cursor: pointer;
        }

        input {
            text-align: left !important;
        }

        .table-detail td.td-value {
            text-align: left !important;
            padding-left: 6px !important;
            font-size: 14px !important;
        }

        .table-detail td.td-value2 {
            padding: 1px !important;
            text-align: left !important;
            padding-left: 6px !important;
        }

        .td-value2 input {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        .btn-group-xs > .btn, .btn-xs {
            padding: 1px 5px;
            font-size: 16px;
            line-height: 1.5;
            border-radius: 3px;
        }

        .table-detail textarea {
            height: 60px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            line-height: 20px;
            padding-top: 2px !important;
            padding-left: 6px;
        }

        .td-row3 span {
            max-height: 60px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .td-module td {
            color: black;
        }

        .table-detail {
            border-left: 1px solid #cbcbcb;
            border-top: 1px solid #cbcbcb;
        }

        .table-detail .td-module {
            background-color: yellow;
        }

        .span-a-btn {
            position: absolute;
            right: 10px;
            margin-right: 19px;
        }

        .span-a-btn a {
            font-size: 20px;
        }

        .lineTwo span {
            max-height: 48px;
            line-height: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;

        }
    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<div class="div-td-content-more"><i></i></div>
<section class="content" id="app" v-cloak style="padding:0px;">
    <div class="center" style="overflow:auto;overflow-x:hidden;">
        <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="5">
                    <input type="checkbox" id="checkAll" v-model="isCheckedAll" class="pull-left "  style="margin-top: 9px"/>
                    <span class="pull-left">全选</span>基本信息
                </td>
            </tr>
            <tr>
                <td class="td-title" >
                    <input type="checkbox" :checked="isArrayBasic('name;姓名')" enabled="isEnable(item)"  style="align-content: left" @click="checked('name;姓名')"/>
                    <span>姓名</span>
                </td>
                <td class="td-title" >
                    <input type="checkbox" :checked="isArrayBasic('sex;性别')" enabled="isEnable(item)" @click="checked('sex;性别')"/>
                    <span>性别</span>
                </td>
                <td class="td-title" >
                    <input type="checkbox" :checked="isArrayBasic('tel;电话')" enabled="isEnable(item)" @click="checked('tel;电话')"/>
                    <span>电话</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('departName;部门')" enabled="isEnable(item)" @click="checked('departName;部门')"/>
                    <span>部门</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('roleName;职位')" enabled="isEnable(item)" @click="checked('roleName;职位')"/>
                    <span>职位</span>
                </td>
            </tr>
            <tr>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('regionName;负责区域')" enabled="isEnable(item)" @click="checked('regionName;负责区域')"/>
                    <span>负责区域</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('entryDate;入职时间')" enabled="isEnable(item)" @click="checked('entryDate;入职时间')"/>
                    <span>入职时间</span>
                </td>
                <td class="td-title" >
                    <input type="checkbox" :checked="isArrayBasic('dayNumber;在职天数')" enabled="isEnable(item)" @click="checked('dayNumber;在职天数')"/>
                    <span>在职天数</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('nation;民族')" enabled="isEnable(item)" @click="checked('nation;民族')"/>
                    <span>民族</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('nativePlace;籍贯')" enabled="isEnable(item)" @click="checked('nativePlace;籍贯')"/>
                    <span>籍贯</span>
                </td>
            </tr>
            <tr>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('address;现居住址')" enabled="isEnable(item)" @click="checked('address;现居住址')"/>
                    <span>现居住址</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('card;身份证号')" enabled="isEnable(item)" @click="checked('card;身份证号')"/>
                    <span>身份证号</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('birthday;出生日期')" enabled="isEnable(item)" @click="checked('birthday;出生日期')"/>
                    <span>出生日期</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('maritalStatus;婚姻状况')" enabled="isEnable(item)" @click="checked('maritalStatus;婚姻状况')"/>
                    <span>婚姻状况</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('carCard;配车车牌号')" enabled="isEnable(item)" @click="checked('carCard;配车车牌号')"/>
                    <span>配车车牌号</span>
                </td>
            </tr>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('computerStart;电脑')" enabled="isEnable(item)" @click="checked('computerStart;电脑')"/>
                    <span>电脑</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('graduate;毕业院校')" enabled="isEnable(item)" @click="checked('graduate;毕业院校')"/>
                    <span>毕业院校</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('education;学历')" enabled="isEnable(item)" @click="checked('education;学历')"/>
                    <span>学历</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('professional;专业')" enabled="isEnable(item)" @click="checked('professional;专业')"/>
                    <span>专业</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('wegeCard;工资卡号')" enabled="isEnable(item)" @click="checked('wegeCard;工资卡号')"/>
                    <span>工资卡号</span>
                </td>
            </tr>
            <tr>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('bank;开户行')" enabled="isEnable(item)" @click="checked('bank;开户行')"/>
                    <span>开户行</span>
                </td>
                <td class="td-title"  >
                    <input type="checkbox" :checked="isArrayBasic('email;邮箱')" enabled="isEnable(item)" @click="checked('email;邮箱')"/>
                    <span>邮箱</span>
                </td>
                <td class="td-title"></td>
                <td class="td-title"></td>
                <td class="td-title"></td>
            </tr>
        </table>
        <div class="south no-print" style="height:50px;line-height:50px;text-align:center;">
            <input type="button" style="margin-left:20px;" value="确认导出" class="btn btn-primary btn-sm"
                   @click="exportGet">
        </div>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var app = new Vue({
        el: '#app',
        data: {
            isCheckedAll: false,
            fields: [],
            companyId: $.wyui.page.urlParams.companyId,
            basicList: ['name;姓名', 'sex;性别', 'tel;电话', 'departName;部门', 'roleName;职位', 'regionName;负责区域', 'entryDate;入职时间', 'dayNumber;在职天数', 'nation;民族', 'nativePlace;籍贯', 'address;现居住址', 'card;身份证号', 'birthday;出生日期', 'maritalStatus;婚姻状况', 'carCard;配车车牌号', 'computerStart;电脑', 'graduate;毕业院校', 'education;学历', 'professional;专业', 'wegeCard;工资卡号', 'bank;开户行', 'email;邮箱'],
        },
        watch: {
            isCheckedAll: function (isCheck) {
                if (isCheck) {
                    for (var i = 0; i < this.basicList.length; i++) {
                        var item = this.basicList[i];
                        item.checked = this.isCheckedAll;
                        this.fields.push(item);
                    }

                } else {
                    this.fields = [];
                    for (var i = 0; i < this.basicList.length; i++) {
                        var item = this.basicList[i];
                        item.checked = this.isCheckedAll;
                    }
                }
            },
        },
        methods: {
            checked: function (item) {
                var that = this;
                if ($.inArray(item, that.fields) > -1) {
                    // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                    console.log(that.fields.length)
                    for (var i = 0; i < that.fields.length; i++) {
                        if (that.fields[i] == item) {
                            that.fields.splice(i, 1);
                            console.log(that.fields)
                        }
                    }
                } else {
                    // 选中该checkbox
                    that.fields.push(item)
                }
            },
            isArrayBasic: function (id) {
                var that = this;
                if ($.inArray(id, that.fields) > -1) {
                    // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
                    return true;
                } else {
                    // 选中该checkbox
                    return false;
                }
            },
            isEnable: function (item) {
                return true;
            },
            exportGet: function () {
                var that = this;
               var fieldList = that.fields;
                console.log(fieldList)
                $('#ifExprot').attr('src', server.ip
                    + "/user/getDownTXLList.json"
                    + '?companyId=' + that.companyId
                    + '&fieldList=' + fieldList
                );
                setTimeout(function () {
                     App.unblockUI('#app');
                    api.close();
                }, 4000)
              //  return false;
            }


        },
        mounted: function () {

        }
    });

</script>
</body>
</html>